<template>
  <div style="position: relative;width: 160px;height: 160px;" @mouseover="showDelete" @mouseout="hideDelete">
    <img :src="src" style="width: 160px;height: 160px;border-radius: 5px;">
    <div v-show="deleteVisible" style="display:flex;justify-content: space-around;align-items: center;border-radius: 5px;
    position: absolute;top: 0; left: 0;right: 0;bottom: 0;z-index: 10;background-color: rgba(0,0,0,.5)">
      <i class="el-icon-delete" style="color: white;cursor: pointer;" @click="sendUrl"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      deleteVisible: false
    }
  },
  methods: {
    showDelete () {
      this.deleteVisible = true
    },
    hideDelete () {
      this.deleteVisible = false
    },
    sendUrl () {
      let url = this.$props.src
      let index = this.$props.index
      console.log('deleteImg url = ' + url)
      this.$emit('getUrl', url, index)
    }
  }
}
</script>
<style>
</style>
